import React from 'react';

import { ActivityIndicator, DatePicker, TextareaItem, Toast } from 'antd-mobile';
import moment from 'moment';
import { createForm } from 'rc-form';
import { router, withRouter } from 'umi';

import { defaultFormatResult, useRequest } from '@/hooks';
import CustomNavBar from '@/pages/EntryManage/mobile/components/CustomNavBar';
import EntryMetaTag from '@/pages/EntryManage/mobile/components/EntryMetaTag';
import { applyUpdateEntryDate, getFirstSimpleInfo } from '@/pages/EntryManage/services';
import { Button, EditListItem, NoticeBar } from '@/pages/RecruitEmail/mobile/components';

import styles from '../entryEmployeeDetail/index.less';

/**
 * 修改入职时间
 */
const ChangeEntryDateMobile = ({ form, location }) => {
    const { query } = location;
    const { entryPersonnelCode } = query;
    const { getFieldProps } = form;

    // 获取入职人员信息
    const { data: formData = {}, loading: formDataLoading } = useRequest(
        () => getFirstSimpleInfo({ entryPersonnelCode }),
        {
            ...defaultFormatResult
        }
    );
    // 提交
    const { run: submitRun, loading: submitLoading } = useRequest(submitData => applyUpdateEntryDate(submitData), {
        manual: true
    });

    // 提交
    const handleSubmit = () => {
        form.validateFields((err, values) => {
            if (!err) {
                const submitData = {
                    entryPersonnelCode,
                    ...values,
                    entryDate: formData.entryDate,
                    applyEntryDate: moment(values.applyEntryDate).format('YYYY-MM-DD')
                };
                // 提交
                submitRun(submitData).then(res => {
                    if (res.code === 10000) {
                        Toast.info('已收到您反馈的入职时间', 3, null, false);
                        history.goBack();
                    } else {
                        Toast.info(res.msg);
                    }
                });
            } else {
                const errorList = Object.values(err);
                if (errorList && errorList.length > 0) {
                    const { errors } = errorList[0];
                    Toast.info(errors[0]?.message, 3, null, false);
                }
            }
        });
    };

    return (
        <>
            {(formDataLoading || submitLoading) && <ActivityIndicator toast text="正在加载" />}
            {formData ? (
                <div className={styles.entryMobileContainer}>
                    <EntryMetaTag />
                    <CustomNavBar>修改入职时间</CustomNavBar>
                    <NoticeBar style={{ position: 'absolute', zIndex: 10, left: 0, right: 0, top: 45 }}>
                        提交后将通知HR，最终入职时间将通过邮件再次通知您
                    </NoticeBar>
                    <div className="formContainer formContainerFixed" style={{ paddingTop: 20 }}>
                        <EditListItem title="原入职时间" showArrow={false}>
                            <span style={{ fontSize: 16 }}>{formData?.entryDate}</span>
                        </EditListItem>
                        <DatePicker
                            title="期望入职时间"
                            mode="date"
                            extra="请选择"
                            minDate={new Date()}
                            locale={{ okText: '确定', dismissText: '取消' }}
                            {...getFieldProps('applyEntryDate', {
                                initialValue:
                                    (formData?.applyEntryDate && moment(formData.applyEntryDate).toDate()) || null,
                                rules: [{ required: true, message: '期望入职时间不能为空' }]
                            })}
                        >
                            <EditListItem title="期望入职时间">请选择</EditListItem>
                        </DatePicker>
                        <EditListItem title="修改原因" showArrow={false}>
                            <TextareaItem
                                className="customTextarea"
                                autoHeight
                                rows={2}
                                count={1000}
                                {...getFieldProps('applyReason', {
                                    initialValue: formData?.applyReason || '',
                                    rules: [
                                        { required: true, message: '修改原因不能为空' },
                                        { max: 1000, message: '不能超过1000个字符' }
                                    ]
                                })}
                                clear
                                placeholder="请输入"
                            />
                        </EditListItem>
                    </div>
                    <div className="formControls">
                        <Button type="primary" onClick={handleSubmit}>
                            提交
                        </Button>
                    </div>
                </div>
            ) : null}
        </>
    );
};

export default withRouter(createForm()(ChangeEntryDateMobile));
